<template>
  <el-dialog
    :close-on-click-modal="false"
    :show-close="false"
    :title="isPoster?'添加':'修改'"
    :visible.sync="isImport"
    width="40%"
  >
    <div v-if="isImport" :style="form.type==1?'height:800px;':'height:700px;'">
        <div>注意：小程序码，可以随意拖动的位置就是该商品分享码生成之后的位置。</div>
        <div :style="form.type==1?'height:700px;':'height:600px;'" >
            <div class="poster" :class="form.type==1?'imagesize':'imagesize1'">
                <img :src="form.share_bg" alt="" :class="form.type==1?'imagesize':'imagesize1'">
                <img @mousedown="move($event)" class="QRcode" :class="form.type==1?'codesize1':'codesize2'" :src="require('./QRcode.png')" :style="{left:form.qr_x/2+'px',top:form.qr_y/2+'px'}" alt="">
            </div>
            <div class="pattern">
                <el-form
                    ref="ruleForm"
                    :model="form"
                    size="small"
                    class="form-box"
                    >
                    <el-form-item label="海报样式选择：" >
                        <el-select v-model="form.type" @change="selectchange" placeholder="请选择" :clearable="false">
                        <el-option label="样式一" :value="1"></el-option>
                        <el-option label="样式二" :value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
                <div class="pattern1">
                    样式一：750*1340
                </div>
                <div class="pattern1" style="margin-top: 5px;">
                    样式二：650*1050
                </div>
            </div>
        </div>
        <div class="but">
            <el-button plain @click="submitForClose('ruleForm')">取消</el-button>
            <el-button type="danger" @click="$emit('closeDialog')">删除</el-button>
            <el-button type="primary" plain @click="submitFormClose">确定</el-button>
        </div>
    </div>
  </el-dialog>
</template>

<script lang="ts">
import { Component, Vue, Prop, Provide, Watch } from "vue-property-decorator";
import goodsApi from "@/api/goods";
import channelApi from "@/api/channel";

@Component({
  components: {}
})
export default class freightEditDialog extends Vue {
    // 属性或参数中使用 ！：表示强制解析（告诉typescript编译器，这里一定有值），常用于vue-decorator中的@Prop
    @Prop(Boolean) isImport!: boolean;
    @Prop(Boolean) isPoster!: boolean;
    @Prop(String) posterImg!:string;
    @Prop(Object) formDate!:{
        share:{
            type:any,
            qr_y:any,
            qr_x:any
        }
    };
    form:any={
        type:1,
        qr_y:0,
        qr_x:0
    }
    created () {
        let form = JSON.stringify(this.formDate.share)
        this.form = JSON.parse(form)
        this.form.qr_y = parseInt(this.form.qr_y)
        this.form.qr_x = parseInt(this.form.qr_x)
        // this.form = this.formDate.share
    }
    move(e){
        let odiv = e.target;        //获取目标元素
        //算出鼠标相对元素的位置
        let disX = e.clientX - odiv.offsetLeft;
        let disY = e.clientY - odiv.offsetTop;
        document.onmousemove = (e)=>{       //鼠标按下并移动的事件
            //用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
            let left = e.clientX - disX;    
            let top = e.clientY - disY;
            let H = this.form.type=='1'?670-75:525-60
            let W = this.form.type=='1'?375-75:325-60
            //移动当前元素
            if(left<0||left>W||top<0||top>H) {
                left=0
                top=0
            }
            odiv.style.left = left + 'px';
            odiv.style.top = top + 'px';
            this.form.qr_y = top*2
            this.form.qr_x = left*2
            console.log(this.form.qr_y )
        };
        document.onmouseup = () => {
            console.log('松开鼠标')
            document.onmousemove = null;
            document.onmouseup = null;
        };
    } 
  submitFormClose() {
    this.$emit('determine',this.form)
  }
  submitForClose(formName) {
    let form = JSON.stringify(this.formDate.share)
    this.form = JSON.parse(form)
    this.form.qr_y = parseInt(this.form.qr_y)
    this.form.qr_x = parseInt(this.form.qr_x)
    this.$emit('closeDialog1')
  }
  selectchange(e) {
    this.form.type = e
    this.form.qr_y = 0
    this.form.qr_x = 0
  }
}
</script>

<style lang="scss" scoped>
.form-box {
  .el-input,
  .el-select {
    width: 200px !important;
  }
}
.poster {
    text-align: center;
    overflow: hidden;
    float: left;
    margin-top: 20px;
    position: relative;
    >img {
        vertical-align: top;
    }
    >.QRcode {
        position: absolute;
    }
}
.codesize1 {
    width: 75px;
    height: 75px;
}
.codesize2 {
    width: 60px;
    height: 60px;
}
.pattern {
    float: right;
    >.pattern1 {
        width: 160px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        border: 1px solid #ccc;
    }
}
.but {
    text-align: center;
    margin-top: 20px;
}
.imagesize {
    width: 375px;
    height: 670px;
}
.imagesize1 {
    height: 525px;
    width:325px;
}
</style>